<template>
  <div>
    <el-form v-loading="loading" :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px"
      class="demo-dynamic">
      <div style="margin:20px 0;">
        <span style="font-size:35px;font-weight:600;">新建公告</span>
      </div>
      <div style="margin:10px 0;">
        <span style="font-size:25px;color:red;">(上下拖动简介、段落文本框右下角改变高度)</span>
      </div>
      <div style="margin:10px 0;">
        <span style="font-size:25px;color:red;">(段落换行直接回车换行即可，不需要考虑每段前空两个字符)</span>
      </div>
      <el-form-item prop="title" label="标题">
        <el-input style="font-size:18px;" v-model="dynamicValidateForm.title"></el-input>
      </el-form-item>

      <el-form-item label="内容" :prop="dynamicValidateForm.content">
        <el-input :autosize="{ minRows: 10}" style="font-size:18px;" type="textarea"
          v-model="dynamicValidateForm.content"></el-input>
      </el-form-item>

      <div style="margin:15px 0;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Lunch',
  data () {
    return {
      loading: false,
      dynamicValidateForm: {
        title: '',
        content: ''
      },
      Form: {
        title: '',
        content: ''
      }
    }
  },
  methods: {
    submitForm (formName) {
      if (this.dynamicValidateForm.title && this.dynamicValidateForm.content) {
        this.loading = true
        this.Form = this.dynamicValidateForm
        var text = this.dynamicValidateForm.content
        var re = /\n/g
        var string = text.replace(re, '<span>')
        this.Form.content = string
        var formData = new FormData()
        let that = this
        formData.append('content', encodeURI(that.Form.content))
        formData.append('introduction', '')
        formData.append('title', that.Form.title)
        formData.append('updateTime', that.getTime())

        this.$axios({
          method: 'post',
          url: '/notice/insert',
          data: formData
        }).then((res) => {
          if (res.data.message === 'SUCCESS') {
            this.loading = false
            this.open('公告发布成功！')
          } else {
            this.failed('发布失败，请与开发人员联系！')
          }
        })
      }
    },
    open (text) {
      this.$notify({
        title: '成功',
        message: text,
        type: 'success'
      })
    },
    failed (text) {
      this.$notify.error({
        title: '失败',
        message: text
      })
    },
    getTime () {
      var date = new Date()
      var seperator1 = '-'
      var seperator2 = ':'
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var strDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
        ' ' + date.getHours() + seperator2 + date.getMinutes() +
        seperator2 + date.getSeconds()
      return currentdate
    }
  }
}
</script>

<style scoped>
.imgItem {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: hidden;
  margin: 15px 0;
}
.img {
  width: 450px;
  height: 300px;
}
.ipt {
  width: 350px;
}
</style>
